<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="80px" label-position="right" slot="form" :rules="rules" ref="ruleForm">
                <el-row :gutter="41">
                    <!-- <el-col :span="8">
                        <el-form-item label="学校名称" prop="schoolName">
                            <school v-model="formInline.schoolName" style="width:100%" @change="schoolChange"></school>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="8">
                        <el-form-item label="适用日期">
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center"> 至 </el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" format="yyyy-MM-dd" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2" @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发布时间">
                          <el-date-picker
                            v-model="formInline.publishDate"
                            type="date"
                            format="yyyy-MM-dd"
                            placeholder="选择日期"
                            :picker-options="formInline.pickerOptions3"
                            style="width:100%"
                            >
                          </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                       <div class="btnPosition">
                        <el-button type="primary" @click="onSubmit('ruleForm')">查询</el-button>
                    </div>
                    </el-col>
                </el-row>
                <!-- <div class="formBtn">
                    <div class="btnPosition">
                        <el-button type="primary" @click="onSubmit('ruleForm')">查询</el-button>
                    </div>
                </div> -->
            </el-form>
             <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button  @click="addNewRecipe">添加食谱</el-button>
                </div>
            </div>
            <el-table :data="formInline.recipeList" border style="width: 100%" v-loading="loading" >
                <!-- <el-table-column type="index" border width="50" label="序号" align="center"></el-table-column> -->

                <el-table-column label="适用日期" align="center" prop="suitTime" ></el-table-column>

                <!-- <el-table-column label="学校" align="center" prop="schoolName" width="250"></el-table-column> -->

                <el-table-column label="发布时间" align="center" prop="createTime"></el-table-column>

                <el-table-column label="发布人" align="center" prop="creatorName"></el-table-column>

                <el-table-column label="操作"  width="140">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="check(scope.row.pId,scope.row.schoolName)">查看</el-button> 
                        <el-button type="text" class="btn-success" @click="delRow(scope.row.pId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

    </div>
</template>

<script>
import moment from 'moment';
import TableLayout from 'components/TableLayout';
import school from 'components/SchoolClasss/school';
import { mapState, mapActions, mapGetters } from 'vuex';
import {
  getRecipeListByPage,
  delRecipeByRecipeId
} from 'api/recipeManage';

export default {
    name: 'recipeList',
    components: { TableLayout, school},
    data() {
        return {
            formInline: {
                schoolList: [],
                schoolName: '', // 学校名称
                startDate: '', // 开始时间
                endDate: '', // 结束时间
                publishDate: '', // 发布时间
                pickerOptions1: {},
                pickerOptions2: {},
                pickerOptions3: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                recipeList: [] // 食谱列表

            },
            // schoolId: '378170406713950208', 
            loading: true,
            // loading: false,
            schoolLoading: false, // 学校名称模糊搜索
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {
        // 分页
                page: 1,
                total: 0
            },
            rules: {
                schoolName: [{ required: true, message: '请输入学校名称', trigger: 'blur' }]
            }
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['uid', 'schoolId'])
    },
    created() {
    // 获取所有食谱列表
        this.searchFetchData();
    },
    methods: {
    // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

     // 获取学校id
        // schoolChange(val) {
        //     this.formInline.schoolId = val;
        //     //console.log(this.formInline.schoolName);
        // },

    // 功能：查询
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.loading = true;
                    this.searchFetchData();
                   
                } else {
                    return false;
                }
            });
        },


        // 查询数据
        searchFetchData() {
            let publishDateTemp = this.formInline.publishDate === '' ? '':moment(this.formInline.publishDate).format('YYYY-MM-DD');
            let startTemp = this.formInline.startDate == '' ? '' :moment(this.formInline.startDate).format('YYYY-MM-DD');
            let endTemp = this.formInline.endDate == '' ?'' :moment(this.formInline.endDate).format('YYYY-MM-DD');
            getRecipeListByPage(
                this.schoolId,
                this.listQuery.page,
                this.config.pageSize,
                publishDateTemp,
                startTemp,
                endTemp
            ).then(response => {
                this.formInline.recipeList = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },


    // 功能：开始日期选择3
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime();
                }
            };
        },

    // 功能：结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() - 864e5;
                }
            };
        },

        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
            
        },

    //  功能：当前页码数
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },

    // 功能：添加新食谱
        addNewRecipe() {
            this.$router.push({
                path: 'addNewRecipe'
            });
        },

    // 功能：查看跳转到详细页面
        check(recipeId, schoolId) {
            this.$router.push({
                path: `detail/${recipeId}/${schoolId}`
            });
        },

    // 功能：删除
        delRow(recipeId) {
            //console.log('fdafdaf', recipeId);
         // 食谱的ID
            let roleId = recipeId;
            this.$confirm('确定删除食谱?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
            .then(() => {
                delRecipeByRecipeId(roleId).then(response => {
                     // 获取食谱列表
                    if (response.data.status == 200) {
                        this.searchFetchData();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message.error(response.data.errorMsg);
                        // this.$message({
                        //     type: 'warning',
                        //     message: response.data.errorMsg
                        // });
                    }
                   
                });
            })
            .catch(e => {
                //console.log(e);
            });
        }
    }
};
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
.content {
  position: relative;
  padding: 0px;
  $bgcolor: #fff;
  label {
    text-align: left;
  }
  .el-tag {
    margin-left: 5px;
    background: #f9f9f9;
    color: #444;
  }

    .btnPosition {
        float:right;
    }


//   .formInline {
//     .formBtn {
//       width: 100%;
//       height: 70px;
//       border-top: 1px solid #dddddd;
//       position: relative;
//       .btnPosition {
//         position: absolute;
//         right: 0px;
//         top: 18px;
//       }
//     }

//     .table-title {
//       .btnPosition {
//         position: absolute;
//         left: 0px;
//         top: 18px;
//       }
//     }
//   }
  .footer {
    text-align: center;
    margin-top: 40px;
  }
  .footer .el-button {
    padding: 10px 40px;
  }
}

section,
footer {
  text-align: center;
}

section {
  padding-bottom: 50px;
  el-button {
    margin-right: 20px;
  }
}
</style>


